<script>
	import Hotel from "@/mall_subpages/merchants/detail/hotel.vue";
	import {
		getGoodsDetail,
		getPointsExchangeRatio
	} from "@/api/mall";
	import HzSafeArea from "@/components/layout/hz/hz-safe-area.vue";
	import UnvProgress from '../components/mall-progress.vue'
	// 导入收藏相关API
	import {
		getCheckCollection,
		getAddCollection,
		getCancelCollection
	} from '@/api/homePage.js'
	import Config from "@/config";

	export default {
		name: "index",

		components: {
			HzSafeArea,
			Hotel,
			UnvProgress
		},
		data() {
			return {
				imgUrl: Config.imgUrl,
				goodsType: null,
				detail: {}, //商品详情
				goodsId: 0, //商品ID
				topBanner: [], //顶部banner
				proportion: 1,
				isCollected: false, // 是否已收藏
				validateDate: ''
			}
		},
		computed: {
			showPoints() {
				const points = Math.ceil(this.detail.ShowPrice * this.proportion)
				if (points || points === 0) return points
				return '-'
			}
		},
		onLoad(options) {
			console.log(options)
			this.goodsType = options.type
			this.goodsId = options.id
			this.init()
		},
		methods: {
			async init() {
				const res = await getPointsExchangeRatio()
				const data = res.Data
				this.proportion = data.PointToCNYRatio

				const {
					Data
				} = await getGoodsDetail({
					Id: this.goodsId
				})
				console.log(JSON.parse(JSON.stringify(Data)))
				this.detail = Data
				if (Data.AddTime) {
					const startTime = Data.AddTime.split(' ')[0]
					const currentDate = new Date(Data.AddTime);
					currentDate.setDate(currentDate.getDate() + 365);
					const year = currentDate.getFullYear();
					const month = String(currentDate.getMonth() + 1).padStart(2, '0'); 
					const day = String(currentDate.getDate()).padStart(2, '0'); 
					const endTime = `${year}-${month}-${day}`;
					this.validateDate = `${startTime}-${endTime}`;
				}
				if (Data.ImgList) {
					this.topBanner = Data.ImgList.split("|")
				}

				// 检查收藏状态
				this.checkCollectionStatus()
			},
			onReserve() {
				// uni.showToast({
				//   title: '正在开发中',
				//   icon: 'none'
				// })
				uni.navigateTo({
					url: "/mall_subpages/goods/predetermined?id=" + this.goodsId + "&type=" + this.detail.Type +
						"&integral=" + true
				})
			},
			// 检查收藏状态
			async checkCollectionStatus() {
				try {
					const res = await getCheckCollection({
						CollectionType: 11, // 商品收藏类型
						Id: this.goodsId // 商品ID
					});

					if (res && res.Data) {
						this.isCollected = true;
					} else {
						this.isCollected = false;
					}
					console.log('商品收藏状态:', this.isCollected);
				} catch (error) {
					console.error('检查收藏状态失败:', error);
				}
			},

			// 切换收藏状态
			async toggleCollect() {
				try {
					if (this.isCollected) {
						// 取消收藏
						await getCancelCollection({
							CollectionType: 11, // 商品收藏类型
							Id: this.goodsId // 商品ID
						});

						this.isCollected = false;
						uni.showToast({
							title: '已取消收藏',
							icon: 'none',
							duration: 2000
						});
					} else {
						// 添加收藏
						await getAddCollection({
							CollectionType: 11, // 商品收藏类型
							Id: this.goodsId // 商品ID
						});

						this.isCollected = true;
						uni.showToast({
							title: '收藏成功',
							icon: 'success',
							duration: 2000
						});
					}
				} catch (error) {
					console.error('操作收藏失败:', error);
					uni.showToast({
						title: '操作失败，请重试',
						icon: 'none',
						duration: 2000
					});
				}
			},
			storeDialogHandle(flag) {
				const fn = flag ? 'open' : 'close'
				this.$refs.userSelector[fn](false);
			}
		}
	}
</script>

<template>
	<view class="contain">
		<!-- banner部分 -->
		<view class="carousel-section">
			<u-swiper :list="topBanner" indicatorMode="dot" indicator indicatorStyle="bottom: 70rpx"
				height="450rpx"></u-swiper>
		</view>

		<!-- 主体内容 -->
		<view class="content">
			<!-- 标题和分享 -->
			<view class="header">
				<view class="header-inner">
					<view class="header-price">
						<view class="current-price">
							<text class="symbol">积分</text>
							<text class="price">
								{{ showPoints }}
							</text>
						</view>
						<!-- <text class="original-price">￥{{detail.MarketPrice}}</text> -->
						<!--            <view class="original-price"><text>积分</text><text>{{detail.MarketPrice * proportion || "-"}}</text></view>-->
					</view>
					<view class="title-wrap">
						<view class="goods-name-line">
							<text class="title">{{ detail.Name }}</text>
							<!-- <text class="exchange-amount">累计兑换233件</text> -->
						</view>
						<text class="title-sub">{{ detail.Subtitle || '' }}</text>
					</view>
				</view>
			</view>

			<!-- 浮动按钮 -->
			<view class="float-btns">
				<view class="collect-btn" @click="toggleCollect">
					<image :src="isCollected ? 'https://wzws.wanshanlundiao.cn/upload/img/20250519/202505191530139634.png'
            : 'https://wzws.wanshanlundiao.cn/upload/img/20250519/202505191530083228.png'" mode="aspectFit"></image>
					<text>{{ isCollected ? '已收藏' : '收藏' }}</text>
				</view>
				<view class="share-btn">
					<image src="https://wzws.wanshanlundiao.cn/upload/img/20250407/202504071011497781.png"
						mode="aspectFit">
					</image>
					<text>分享</text>
					<button open-type="share" class="share-open-btn"></button>
				</view>
			</view>

			<!--      <view class="detail-info">-->
			<!--        <view class="info-item"><text>入驻时间</text><text>当日14:00之后可入住</text></view>-->
			<!--        <view class="info-item"><text>保障</text><text>过期随时退</text></view>-->
			<!--      </view>-->

			<view class="goods-info-card">
				<!-- <view class="dhjd-bar">
					<text class="jdt-title">兑换进度</text>
					<unv-progress class="jdt-line" backColor="#FFEFEF" :ratio="60" progressHeight="32rpx" />
					<text class="jdt-status">剩68件</text>
				</view> -->
				<view class="info-bar">
					<!-- <view>
						<text class="info-bar-title">商品种类</text>
						<text class="info-bar-text">优惠卷</text>
					</view> -->
					<view>
						<text class="info-bar-title">有效期</text>
						<text class="info-bar-text">{{ validateDate }}</text>
					</view>
					<view class="goods-addrs-bar">
						<text class="info-bar-title">适用门店</text>
						<view>
							<text class="info-bar-text">{{ detail.BusinessModel.ShopName }}</text>
							<view class="goods-addrs" @click="storeDialogHandle">
								<text>查看1家适用门店</text>
								<image :src="imgUrl+'upload/img/ws_static/static/mall/icon_arrow_right.png'"  />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section-title">
				<text>商品详情</text>
			</view>
			<!-- 详情 -->
			<view v-if="detail.Substance" class="section details">
				<mp-html :content="detail.Substance" />
			</view>

			<!--      <view class="section-title">-->
			<!--        <text>评价</text>-->
			<!--      </view>-->
			<!--      &lt;!&ndash; 评价列表 &ndash;&gt;-->
			<!--      <view class="section">-->
			<!--        暂无评价-->
			<!--      </view>-->
			<hz-safe-area background="#F5F6F7"></hz-safe-area>
		</view>
		<view class="bottom-btn">
			<view class="bottom-inner">
				<view class="left-info">
					<view class="price-info">
						<text class="symbol">积分</text>
						<text class="price">{{ showPoints }}</text>
					</view>
				</view>
				<view class="reserve-btn" @click="onReserve">
					<text>立即兑换</text>
				</view>
			</view>
			<uni-popup ref="userSelector" type="bottom">
				<view class="popup-content">
					<view class="popup-header">
						<view class="popup-title">
							<text class="popup-title-top">适用门店</text>
							<text class="popup-title-bottom">合计共1家门店可用</text>
						</view>
						<text class="popup-close" @click="$refs.userSelector.close()">×</text>
					</view>
					<view class="popup-body">
						<view class="store-list">
							<view class="store-item">
								<image class="store-pic" :src="imgUrl+'upload/img/ws_static/static/userimg/tcyh.png'" />
								<view class="store-addr">
									<view class="store-title">
										<text>{{ detail.BusinessModel.ShopName }}</text>
									</view>
									<view v-if="detail.BusinessModel.Address" class="store-addr-info">
										<image :src="imgUrl+'upload/img/ws_static/static/mall/addr_icon.png'"  />
										<text class="store-name">{{ detail.BusinessModel.Address }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="popup-foot" @click="storeDialogHandle(false)">
							<text>知道了</text>
						</view>
					</view>
				</view>
			</uni-popup>
			<hz-safe-area></hz-safe-area>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.contain {
		min-height: 100vh;
	}

	.content {
		margin-top: -40rpx;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #F5F6F7;
		position: relative;
		z-index: 1;
		overflow: hidden;
		padding-bottom: 100rpx;
		min-height: calc(100vh - 415rpx);
	}

	.header {
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 30rpx;

		.header-inner {
			flex: 1;
		}

		.header-price {
			display: flex;
			align-items: baseline;
			margin-bottom: 15rpx;

			.current-price {
				color: #FF4B31;
				font-weight: 600;

				.symbol {
					font-size: 24rpx;
					margin-right: 2rpx;
				}

				.price {
					font-size: 40rpx;
				}
			}

			.original-price {
				font-size: 24rpx;
				color: #999;
				margin-left: 15rpx;
				text-decoration: line-through;
			}
		}

		.title-wrap {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-bottom: 15rpx;

			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}

			.title-sub {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* 浮动操作按钮 */
	.float-btns {
		position: absolute;
		top: 0;
		right: 30rpx;
		z-index: 10;
		display: flex;

		.share-btn,
		.collect-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 6rpx;
			}

			text {
				font-size: 20rpx;
				color: #666;
			}

			.share-open-btn {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 2;

				&::after {
					display: none;
				}
			}
		}

		.share-btn {
			margin-left: 15rpx;
		}

		.collect-btn {
			&.active {
				text {
					color: #ff6633;
				}
			}
		}
	}

	.detail-info {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx;
	}

	.info-item {
		display: flex;
		font-size: 24rpx;
		margin-bottom: 15rpx;

		&:last-child {
			margin-bottom: 0;
		}

		text:first-child {
			width: 160rpx;
			color: #999;
		}

		text:last-child {
			flex: 1;
			color: #333;
		}
	}

	.details {
		background-color: #fff;
		margin-bottom: 30rpx;
	}

	.section-title {
		padding: 10rpx 30rpx 10rpx 30rpx;
		margin-bottom: 30rpx;
		background-color: white;

		text {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			position: relative;
		}
	}

	.section {
		padding: 30rpx;
	}


	.intro-section {
		.section-title {
			margin-bottom: 20rpx;
		}
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 99;

		.bottom-inner {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			height: 100rpx;

			.left-info {
				display: flex;
				align-items: baseline;

				.price-info {
					color: #FF4B31;
					font-weight: 600;

					.symbol {
						font-size: 24rpx;
						margin-right: 2rpx;
					}

					.price {
						font-size: 40rpx;
					}
				}

				.desc {
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #999;
				}
			}

			.reserve-btn {
				background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
				color: #fff;
				font-size: 30rpx;
				font-weight: 500;
				padding: 16rpx 50rpx;
				border-radius: 40rpx;
			}
		}
	}

	.original-price {
		color: #999;
		text-decoration: line-through;
	}

	.goods-name-line {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.exchange-amount {
		color: #999;
	}

	.goods-info-card {
		background-color: #fff;
		margin: 20rpx 0 30rpx 0;
		padding: 30rpx;
	}

	.dhjd-bar {
		display: flex;
		align-items: center;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #EFEFEF;
		margin-bottom: 22rpx;
	}

	.jdt-title {
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 22rpx;
	}

	.jdt-line {
		flex: 1;
		height: 40rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.jdt-status {
		font-size: 24rpx;
		color: #999;
		margin-left: 24rpx;
	}

	.info-bar {
		font-size: 28rpx;

		&>view {
			display: flex;
			align-items: center;
			line-height: 60rpx;
		}
	}

	.info-bar-title {
		font-weight: 600;
		width: 140rpx;
	}

	.info-bar-text {
		flex: 1;
		color: #5C5C5C;
	}

	.info-bar .goods-addrs-bar {
		align-items: flex-start;

		&>view {
			flex: 1;
		}
	}

	.goods-addrs {
		display: flex;
		align-items: center;
		flex: 1;
		line-height: 40rpx;
		color: #FFA25A;

		&>image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	// 弹窗样式
	.popup-content {
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		height: 80vh;
		display: flex;
		flex-direction: column;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.popup-title {
				font-size: 32rpx;
				color: #333;
				flex: 1;
				text-align: center;
				padding-left: 60rpx;
			}

			.popup-title-top {
				font-weight: 600;
				width: 100%;
				display: block;
			}

			.popup-title-bottom {
				width: 100%;
				font-size: 24rpx;

			}

			.popup-close {
				font-size: 40rpx;
				color: #999;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.popup-body {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

		.store-list {
			flex: 1;
			overflow-y: auto;
		}

		.popup-foot {
			width: 80%;
			height: 64rpx;
			border-radius: 30rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			line-height: 64rpx;
			margin: 0 auto 30rpx auto;
			background: linear-gradient(135deg, #498FFF 0%, #3A7FE6 100%);
		}

		.store-item {
			display: flex;
			align-items: center;
			padding: 16rpx;
			width: 90%;
			margin: 0 auto 34rpx;
			border-radius: 10rpx;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05),
				0 1px 3px rgba(0, 0, 0, 0.08);
		}

		.store-pic {
			width: 90rpx;
			height: 90rpx;
			border-radius: 16rpx;
			margin-right: 18rpx;
		}

		.store-addr {
			flex: 1;
			color: #333;
		}

		.store-addr-info {
			font-size: 22rpx;
			line-height: 32rpx;

			&>image {
				width: 24rpx;
				height: 24rpx;
				margin-bottom: -1rpx;
			}
		}

		.store-title {
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 12rpx;
		}
	}
</style>